<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		body{
			background-color: #000;
			color:white;
			font-family: arial;
			font-size: 1em;
		}
		.box{
			width: 100px;
			height: 100px;
			opacity: 1;
			background-color: beige;
			-webkit-transition: all 1s;
			-moz-transition: all 1s;
		}
	</style>
</head>
<body>
	<div class="box"></div>
	<span class="texto">asfasdf</span>
	<input type="radio" name="a" id="radio">
	<hr>
	<div class="t"></div>
	<script>
		var obj = 	{"employees":[
    					{"firstName":"John", "lastName":"Doe"}, 
    					{"firstName":"Anna", "lastName":"Smith"},
    					{"firstName":"Peter", "lastName":"Jones"}
					]};

		var div = '';
		for(var i = 0; i < obj.employees.length; i++){
			div += '<span>' + obj.employees[i].firstName + '</span><br />';
		}

		document.getElementsByClassName('t')[0].innerHTML = div;


		var el = document.getElementsByClassName('box')[0];
		el.style.backgroundColor = "red";

		el.addEventListener('click', function(){
			muove();
			changeText();
		});

		el.addEventListener('mouseenter', function(){
			hover(50);
		})

		el.addEventListener('mouseout', function(){
			hover(0);
		})

		document.getElementById('radio').checked = true;

		function changeText(){
			var elem = document.getElementsByClassName('texto')[0];
			elem.innerHTML = '';
		}

		window.addEventListener( 'resize', function() { console.log('cambio'); } );


		function hover(v){
			el.style.marginTop = v + 'px';
			el.style.opacity = v;
		}

		function muove(){
			el.style.webkitTransform = "rotate(-45deg)";
			el.style.marginTop = "180px";
			el.style.MozTransform = "rotate(-45deg)";
		}

	</script>
</body>
</html>
